/*
 *  变量的作用域问题：
 *  1. Window全局域   	从页面被打开之后页面被关闭之前始终存在
 *  2. 函数名function域    存在函数调用的一瞬间   
 *  3. block作用域
 * 
 * 	闭包的理解：
 *  闭包的作用： 可以保留函数的作用域 
 * 	(要不然闭包里的函数move()等函数就不能使用 slide 函数域里面的变量)
 *  闭包产生的必要条件：函数里面套函数( 内层函数要使用外层函数作用域的变量)
 * 	
 * 	全局变量会产生闭包吗？
 *  不会。因为全局变量存在全局域里
 */

// 中午遗留问题：想一想我没的轮播图能封装成插件吗？会产生什么问题？
/*
 *	1.插件中最好不要使用 id， 原因： 插件是能够被重复使用，
 * 	    也就是说在同一个页面多次被使用，造成冲突
 *  2.变量的命名和方法的命名：status、move() 太常见。 用户在使用这个插件时，
 *    还会有自己创建的 js 文件，也有这样的命名，那么久产生冲突。
 *  3.标签class 的值的问题：prev、next。这些class 太大众化了，
 * 	    谁写 标签都叫 prev 或者 next. 势必会冲突
 *  4.插件文件名命名问题： index.js 、 index.css ，命名大众化 
 * 	  比如这样修改： JQuery.Zy
 * 
 */

// 自运行的匿名函数
/*
(function(){
	alert(111);
})();

$(function(){
	alert(111);
});
*/

(function($) {
	// 本函数每次调用只负责一个轮播图的功能
	// 也就是说直接产生一个轮播图，这个函数的作用域
	// 所有要求在调用本函数的时候务必把轮播图的根标签传进来
	// 这里的形参 ele 就是某个轮播图的根标签
	function Slide(ele, options) {
		// 转换为 jQuery 标签对象
		this.$ele = $(ele);
		// 默认设置选项
		this.setting = {
			// 控制刚开始炸开的时间
			delay: 1000,
			// 控制 setIv 的速度  轮播
			speed: 2000,
		};
		// 对象合并
		$.extend(true, this.setting, options);
		// 先规定好每张图片处于的位置和状态
		this.states = [
			{ ZIndex: 1, width: 120, height: 150, top: 69, left: 134, ZOpacity: 0.2 },
			{ ZIndex: 2, width: 130, height: 170, top: 59, left: 0, ZOpacity: 0.5 },
			{ ZIndex: 3, width: 170, height: 218, top: 35, left: 110, ZOpacity: 0.7 },
			{ ZIndex: 4, width: 224, height: 288, top: 0, left: 263, ZOpacity: 1 },
			{ ZIndex: 3, width: 170, height: 218, top: 35, left: 470, ZOpacity: 0.7 },
			{ ZIndex: 2, width: 130, height: 170, top: 59, left: 620, ZOpacity: 0.5 },
			{ ZIndex: 1, width: 120, height: 150, top: 69, left: 500, ZOpacity: 0.2 }
		];

		//var states = [
		//				{ZIndex:1,width:120,height:150,top:69,left:134,opacity:0.2},
		//				{ZIndex:2,width:130,height:170,top:59,left:0,opacity:0.5},
		//				{ZIndex:3,width:170,height:218,top:35,left:110,opacity:0.7},
		//				{ZIndex:4,width:224,height:288,top:0,left:263,opacity:1},
		//				{ZIndex:3,width:170,height:218,top:35,left:470,opacity:0.7},
		//				{ZIndex:2,width:130,height:170,top:59,left:620,opacity:0.5},
		//				{ZIndex:1,width:120,height:150,top:69,left:500,opacity:0.2}
		//			 ];
		//			 
		//		
		this.lis = this.$ele.find('li');
		this.setIvv = null;

		// 让 li 从正中间展开
		this.move();
		// 开启自动轮播
		this.setIv();
		
//		this.settIv = setInterval(function(){
//			this.bind(this).next();
//		},this.setting.speed).bind(this);
		
		// 点击下一张 (section)
		this.$ele.find('.zy-next').click(function() {
			this.next();
		}.bind(this));

		// 点击上一张 (section)
		this.$ele.find('.zy-prev').click(function() {
			this.prev();
		}.bind(this));

		//$('.zy-slide .prev').hover(function(){
		//	clearInterval(setIvv);
		//},function(){
		//	 setIv();
		//});
		//
		//$('.zy-slide .next').hover(function(){
		//	clearInterval(setIvv);
		//},function(){
		//	setIv();
		//});

		// 停止轮播
		this.$ele.find('.zy-prev,.zy-next').add(this.lis).hover(function() {
			clearInterval(this.setIvv);
		}.bind(this), function() {
			this.setIv();
		}.bind(this));

	}

	// 让每个 li 对应上面 states 的每个状态
	Slide.prototype.move = function() {
		// states = this.states;
		// settings = this.setting;
		this.lis.each(function(index, value) {
			var state = this.states[index];
			$(value).css('z-index', state.ZIndex).finish().animate(state,this.setting.delay).find('img').css('opacity', state.ZOpacity);
		}.bind(this));
	}

	// 点击下一张，让轮播图发送偏移
	Slide.prototype.next = function() {
		// 原理：把数组最后一个元素移到数字的第一位
		this.states.unshift(this.states.pop());
		this.move();
	}

	// 点击上一张，让轮播图发送偏移
	Slide.prototype.prev = function() {
		// 原理：把数组第一个元素移到数字的最后一位
		this.states.push(this.states.shift());
		this.move();
	}

	// 自动轮播
	Slide.prototype.setIv = function(){
		var _this = this;
		this.setIvv = setInterval(function() {
			_this.next();
		}, _this.setting.speed);
	}


	// 找到要轮播的轮播图根标签，调用 slide 方法
	//	$('.slide,.zy-slide').each(function(index,value){
	//		slide($('.zy-slide').eq(index));
	//	});

	// 找到要轮播的轮播图根标签，调用 slide 方法	
	
	$.fn.zySlide = function(options) {
		$(this).each(function(index, value) {
			new Slide(value, options);
		});
		// 支持链式调用
		return this;
	}

})(jQuery);

// 用 jQuery 封装插件的几种方法
/*
 *	插件类写法
 *  $.fn.customFun = function(){
 * 		// 自定义插件的代码
 *  }
 *  用法：
 *  $('selector').customFun();
 *  
 *  工具类写法：
 *  $.customFun = function(){
 * 		// 自定义工具类的代码
 *  }
 *  用法：
 *  $.customFun();
 * 
 * 
 */